<template>
  <div class="ct-cdinside">
    <div class="cdide-title">
      <div class="tit-le">
        <i @click="$router.go(-1)" class="iconfont icon-arrow-right"></i>
      </div>
      <div class="tit-rg">
        <span>场地详情</span>
      </div>
    </div>
    <div class="cdide-body">
      <div class="body-msg">
        <div class="msg-datu">
          <img :src="field.imgs[0]" alt="">
        </div>
        <div class="msg-ads">
          <div class="ads-le">
            <span>{{ field.fieldname }}</span>
          </div>
          <div class="ads-rg">
            <i class="iconfont icon-dizhi"></i>
            <span>{{ field.fieldAdress.split(' ')[0] }}</span>
          </div>
        </div>
        <div class="map-area" :id="mapId"></div>
        <div class="msg-the">
          <div class="the-top">
            <span>适合主题</span>
          </div>
          <div class="the-bot">
            <div v-for="(theme,index) of field.suitable" :key="index" class="bot-box">
              <span>{{ theme }}</span>
            </div>
          </div>
        </div>
        <div class="msg-user">
          <div class="user-top">
            <span>推荐人</span>
          </div>
          <div class="body-user">
            <div class="u-le" @click="gouindex">
              <img :src="field.user.uportrait" alt="">
              <div class="le-rg">
                <div class="rg-box">
                  <span>{{ field.user.username }}</span>
                  <i class="iconfont icon-nv"></i>
                  <i v-show="false" class="iconfont icon-nan"></i>
                </div>
                <span>{{ field.user.role }}</span>
              </div>
            </div>
            <div class="u-rg">
              <i class="iconfont icon-arrow-left"></i>
            </div>
          </div>
        </div>
        <div class="msg-text">
          <div class="text-tit">
            <span>场地描述</span>
          </div>
          <div class="text-cont">
            <div class="cont-yq">
              <span>{{ field.introduce }}</span>
            </div>
          </div>
          <div class="text-img">
            <div class="img_box" v-for='(item,index) in field.imgs' :key='index' v-show="index<6">
              <img :src="item" alt="" @click="getImg(field.imgs,index)">
            </div>
          </div>
          <div class="text-read">
            <span>阅读 {{ field.browse }}</span>
            <span>{{ field.newaddTime }}</span>
          </div>
          <div class="text-pl">
            <div class="pl-box" v-for="(item,index) of pllist" :key="index">
              <div class="pl-le">
                <img :src="item.user.uportrait" alt="">
              </div>
              <div class="pl-rg">
                <div class="rg-uname">
                  <span>{{ item.user.username }}</span>
                </div>
                <div class="rg-pltext">
                  <span>{{ item.commenttext }}</span>
                </div>
                <div class="rg-pltime">
                  <span>{{ item.newaddTime }}</span>
                  <i class="iconfont icon-dianzan1"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foot-tit">
      <van-search
        left-icon=""
        v-model="pltext"
        show-action
        placeholder="写评论"
        @search="onSearch"
        shape="round"
      >
        <template #action>
          <van-button
            round
            @click="onSearch"
            color="#ec8d55"
            size="small">发送
          </van-button>
        </template>
      </van-search>
    </div>
    <div class="cdide-foot" v-show="orther">
      <div class="foot-box" :class="check ? 'active' : ''" @click="dianzan">
        <i class="iconfont icon-dianzan2"></i>
        <span>点赞</span>
      </div>
      <div class="foot-box" :class="checksc ? 'active' : ''" @click="shouchang">
        <i class="iconfont icon-xin"></i>
        <span>收藏</span>
      </div>
      <div class="foot-box">
        <i class="iconfont icon-fenxiang"></i>
        <span>分享</span>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview, Toast } from 'vant';

export default {
  name: 'cdinside',
  data(){
    return{
      pltext: '',
      field: {},
      pllist: [],
      check: false,
      checksc: false,
      orther: true,
      mapId: 'BMap-' + parseInt(Date.now() + Math.random()),
      map: null,
    }
  },
  created() {
    console.info(this.$route.params)
    const { field } = this.$route.params
    if(field.thumbs.length > 0){
      const ischeck = field.thumbs.some(r=>{
        return r.uid == localStorage.getItem('uid')
      })
      this.check = ischeck ? true : false
    }
    if(field.collections.length > 0){
      const ischecksc = field.collections.some(r=>{
        return r.uid = localStorage.getItem('uid')
      })
      this.checksc = ischecksc ? true : false
    }
    this.field = field
    this.commentfind(field.fieldid)
    if( field.uid == localStorage.getItem('uid')){
      this.orther = false
    }
  },
  mounted() {
    this.initMap()
  },
  methods:{
    initMap() {
      // 百度地图API功能
      this.map = new BMap.Map(this.mapId) // 创建Map实例
      this.map.centerAndZoom(this.field.fieldAdress + this.field.fieldname, 16  ) // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件
      this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
      this.map.addEventListener("click", (e) => {
        console.info(e)
        this.map.clearOverlays()
        var marker = new BMap.Marker(e.point);
        this.map.addOverlay(marker);
      });
    },
    async gouindex(){
      this.$router.replace({
        name: "userindex",
        params: {
          user: this.field.user,
          field: this.field
        }
      })
    },
    async dianzan(){
      if(!this.check){
        try {
          const res = await this.$axios({
            url:'/blog/thumbscreate',
            method:"post",
            data:{
              uid: parseInt(localStorage.getItem("uid")),
              fieldid: this.field.fieldid,
            }
          })
          const {success, msg} = res.data
          if (success){
            console.info(success)
            Toast.success('点赞成功')
            this.check = !this.check
          }else {
            Toast.fail(msg)
          }
        }catch (e) {
          Toast.fail(e)
        }
      }else {
        try {
          const res = await this.$axios({
            url:'/blog/thumbsdelete',
            method:"post",
            data:{
              uid: parseInt(localStorage.getItem("uid")),
              fieldid: this.field.fieldid,
            }
          })
          const {success, msg} = res.data
          if (success){
            console.info(success)
            Toast.success('取消成功')
            this.check = !this.check
          }else {
            Toast.fail(msg)
          }
        }catch (e) {
          Toast.fail(e)
        }
      }
    },
    async shouchang(){
      if( !this.checksc){
        try {
          const res = await this.$axios({
            url:'/blog/collcetioncreate',
            method:"post",
            data:{
              uid: parseInt(localStorage.getItem("uid")),
              fieldid: this.field.fieldid,
            }
          })
          const {success, msg} = res.data
          if (success){
            Toast.success('收藏成功')
            this.checksc = !this.checksc
          }else {
            Toast.fail(msg)
          }
        }catch (e) {
          Toast.fail(e)
        }
      }else {
        try {
          const res = await this.$axios({
            url:'/blog/collcetiondelete',
            method:"post",
            data:{
              uid: parseInt(localStorage.getItem("uid")),
              fieldid: this.field.fieldid,
            }
          })
          const {success, msg} = res.data
          if (success){
            console.info(success)
            Toast.success('取消收藏')
            this.checksc = !this.checksc
          }else {
            Toast.fail(msg)
          }
        }catch (e) {
          Toast.fail(e)
        }
      }
    },
    getImg(images,index){
      ImagePreview({
        images: images,
        showIndex:true,
        loop:false, //是否循环播放
        startPosition:index
      })
    },
    async onSearch(){
      try {
        const res = await this.$axios({
          url:'/blog/commentcreat',
          method:"post",
          data:{
            uid: parseInt(localStorage.getItem("uid")),
            fieldid: this.field.fieldid,
            commenttext: this.pltext,
          }
        })
        const {success, msg} = res.data
        if (success){
          Toast.success('评论成功')
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
      this.pltext = '';
      this.commentfind(this.field.fieldid)
    },
    async commentfind(fieldid){
      try {
        const res = await this.$axios({
          url:'/blog/commentfind',
          method:"post",
          data:{
            fieldid,
          }
        })
        const {success, msg, data} = res.data
        if (success){
          console.info(data)
          data.rows.map(r=>{
            const year = new Date(r.commentTime).getFullYear();
            const mouth = `${new Date(r.commentTime).getMonth()+1}`.padStart(2, 0);
            const day = `${new Date(r.commentTime).getDate()}`.padStart(2, 0);
            r.newaddTime = `${year}-${mouth}-${day}`
          })
          this.pllist = data.rows
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
  }
};
</script>

<style scoped lang="scss">
.ct-cdinside{
  height: 100%;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  .cdide-title{
    width: 100%;
    height: vw(90);
    box-sizing: border-box;
    line-height: vw(90);
    background-color: #ffffff;
    display: flex;
    .tit-le{
      width: vw(100);
      i{
        margin-left: vw(30);
        font-size: vw(50);
        color: #c1c1c1;
      }
    }
    .tit-rg{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        transform: translate(vw(-50),vw(2));
        font-size: vw(32);
      }
    }
  }
  .cdide-body{
    flex: 1;
    width: 100%;
    background-color: #f6f6f6;
    overflow-y: auto;
    .body-msg{
      padding: 0 vw(20);
      box-sizing: border-box;
      background-color: #ffffff;
      .map-area {
        height: vw(300);
        margin: vw(10) vw(20);
        background-color: #ffffff;
        ::v-deep .BMap_cpyCtrl{
          display: none;
        }
        ::v-deep .anchorBL{
          display: none;
        }
      }
      .msg-datu{
        img{
          width: 100%;
          height: vw(400);
          object-fit: cover;
        }
      }
      .msg-ads{
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f7f7f9;
        padding: vw(15) 0;
        .ads-le{
          font-size: vw(35);
          font-weight: bold;
          span{
            padding-left: vw(30);
            border-left: vw(10) solid #ec6874;
          }
        }
        .ads-rg{
          flex: 1;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          color: lightpink;
        }
      }
      .msg-the{
        display: flex;
        flex-direction: column;
        .the-top{
          margin-top: vw(30);
          height: vw(30);
          font-size: vw(30);
          line-height: vw(30);
          span{
            border-left: vw(10) solid #ec6874;
            padding-left: vw(30);
          }
        }
        .the-bot{
          display: flex;
          margin:vw(25) 0 vw(25) vw(40) ;
          .bot-box{
            margin-right: vw(20);
            span{
              font-size: vw(24);
              color: lightpink;
              padding: vw(10) vw(25);
              border-radius: vw(30);
              border: 1px solid lightpink;
            }
          }
        }
      }
      .msg-text{
        .text-tit{
          padding: vw(20) 0;
          border-top: 1px solid #f7f7f9;
          span{
            padding-left: vw(30);
            border-left: vw(10) solid #ec6874;
          }
        }
        .text-cont{
          padding-left: vw(40);
          font-size: vw(30);
          color: #4c4c4c;
        }
        .text-img{
          padding-top: vw(30);
          img{
            width: 100%;
            object-fit: cover;
          }
        }
        .text-read{
          display: flex;
          justify-content: space-between;
          font-size: vw(20);
          color: #8e8e8e;
        }
        .text-pl{
          width: 100%;
          margin-top: vw(15);
          padding: 0 vw(20);
          box-sizing: border-box;
          background-color: #ffffff;
          .pl-box{
            padding-top: vw(20);
            display: flex;
            .pl-le{
              width: vw(100);
              img{
                width: vw(80);
                height: vw(80);
                border-radius: 50%;
                object-fit: cover;
              }
            }
            .pl-rg{
              flex: 1;
              .rg-uname{
                font-size: vw(28);
                color: #636363;
              }
              .rg-pltext{
                font-size: vw(30);
                line-height: vw(50);
                padding-bottom: vw(10);
              }
              .rg-pltime{
                display: flex;
                font-size: vw(23);
                align-items: center;
                height: vw(60);
                justify-content: space-between;
                border-bottom: 1px solid #e0e0e0;
                span{
                  color: #a0a0a0;
                }
                i{
                  font-size: vw(32);
                  padding-right: vw(30);
                }
              }
            }
          }
        }
      }
      .msg-user{
        .user-top{
          margin-top: vw(30);
          height: vw(30);
          font-size: vw(30);
          line-height: vw(30);
          span{
            border-left: vw(10) solid #ec6874;
            padding-left: vw(30);
          }
        }
        .body-user{
          width: 100%;
          height: vw(160);
          display: flex;
          padding: 0 vw(20);
          box-sizing: border-box;
          background-color: #ffffff;
          .u-le{
            width: vw(520);
            display: flex;
            align-items: center;
            img{
              width: vw(90);
              height: vw(90);
              border-radius: 50%;
              object-fit: cover;
            }
            .le-rg{
              line-height: vw(40);
              padding-left: vw(30);
              box-sizing: border-box;
              .rg-box{
                span{
                  font-weight: bold;
                  font-size: vw(27);
                }
                i{
                  padding-left: vw(20);
                  font-size: vw(27);
                  color: lightpink;
                }
              }
              &>span{
                font-size: vw(22);
                color: #a9a8a8;
              }
            }
          }
          .u-rg{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            font-size: vw(27);
            color: #a9a8a8;
          }
        }
      }
    }
  }
  .foot-tit{
    ::v-deep .van-button--small{
      padding: 0 vw(34);
    }
    ::v-deep .van-search{
      padding-bottom: 0;
    }
  }
  .cdide-foot{
    height: vw(90);
    display: flex;
    background-color: #ffffff;
    align-items: center;
    justify-content: space-around;
    .foot-box{
      font-size: vw(30);
      span{
        padding-left: vw(10);
      }
    }
    .active{
      color: lightpink;
    }
  }
}
</style>
